<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="title">个人中心</view>
            <view class="right">
                <u-icon name="setting" size="32" color="#333" @click="goSetting"></u-icon>
            </view>
        </view>
        
        <!-- 用户信息 -->
        <view class="user-info">
            <view class="avatar-box">
                <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
                <view class="edit" @click="editAvatar">
                    <u-icon name="camera" size="24" color="#fff"></u-icon>
                </view>
            </view>
            <view class="info" @click="goToUserInfo">
                <view class="name">{{userInfo.name}}</view>
                <view class="desc">{{userInfo.desc}}</view>
            </view>
        </view>
        
        <!-- 健康统计 -->
        <view class="health-stats">
            <view class="stat-item" @click="goHealthRecord">
                <view class="value">{{stats.records}}</view>
                <view class="label">健康档案</view>
            </view>
            <view class="stat-item" @click="goMedicalRecords">
                <view class="value">{{stats.medicalRecords}}</view>
                <view class="label">就诊记录</view>
            </view>
            <view class="stat-item" @click="goMedicationRecords">
                <view class="value">{{stats.medications}}</view>
                <view class="label">用药记录</view>
            </view>
            <view class="stat-item" @click="goHealthIndicators">
                <view class="value">{{stats.indicators}}</view>
                <view class="label">指标记录</view>
            </view>
        </view>
        
        <!-- 功能菜单 -->
        <view class="menu-section">
            <view class="section-title">我的健康</view>
            <view class="menu-list">
                <view class="menu-item" @click="goMyQuestions">
                    <view class="icon">
                        <u-icon name="question" size="32" color="#1890FF"></u-icon>
                    </view>
                    <view class="label">我的问答</view>
                    <view class="arrow">
                        <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                    </view>
                </view>
                <view class="menu-item" @click="goMyCollections">
                    <view class="icon">
                        <u-icon name="star" size="32" color="#FAAD14"></u-icon>
                    </view>
                    <view class="label">我的收藏</view>
                    <view class="arrow">
                        <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                    </view>
                </view>
                <view class="menu-item" @click="goMyConsultations">
                    <view class="icon">
                        <u-icon name="calendar" size="32" color="#52C41A"></u-icon>
                    </view>
                    <view class="label">我的问诊</view>
                    <view class="arrow">
                        <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="menu-section">
            <view class="section-title">健康工具</view>
            <view class="menu-list">
                <view class="menu-item" @click="goReminders">
                    <view class="icon">
                        <u-icon name="bell" size="32" color="#FF4D4F"></u-icon>
                    </view>
                    <view class="label">健康提醒</view>
                    <view class="arrow">
                        <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                    </view>
                </view>
                <view class="menu-item" @click="goHealthCalculator">
                    <view class="icon">
                        <u-icon name="calculator" size="32" color="#722ED1"></u-icon>
                    </view>
                    <view class="label">健康计算</view>
                    <view class="arrow">
                        <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                    </view>
                </view>
                <view class="menu-item" @click="goHospitalMap">
                    <view class="icon">
                        <u-icon name="map" size="32" color="#13C2C2"></u-icon>
                    </view>
                    <view class="label">附近医院</view>
                    <view class="arrow">
                        <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 退出登录 -->
        <view class="logout" @click="logout">
            <text>退出登录</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            userInfo: {
                name: '张三',
                avatar: '/static/touxiang.png',
                desc: '每天积极锻炼，保持健康生活'
            },
            stats: {
                records: 12,
                medicalRecords: 5,
                medications: 8,
                indicators: 30
            }
        }
    },
    methods: {
        goSetting() {
            uni.navigateTo({
                url: '/pages/health/setting'
            })
        },
        goToUserInfo() {
            uni.navigateTo({
                url: '/pages/my/info'
            })
        },
        editAvatar() {
            uni.chooseImage({
                count: 1,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success: (res) => {
                    this.userInfo.avatar = res.tempFilePaths[0]
                    
                    // 模拟上传头像
                    uni.showLoading({
                        title: '上传中...'
                    })
                    
                    setTimeout(() => {
                        uni.hideLoading()
                        uni.showToast({
                            title: '上传成功',
                            icon: 'success'
                        })
                    }, 1000)
                }
            })
        },
        goHealthRecord() {
            uni.navigateTo({
                url: '/pages/health/record'
            })
        },
        goMedicalRecords() {
            uni.navigateTo({
                url: '/pages/health/records'
            })
        },
        goMedicationRecords() {
            uni.navigateTo({
                url: '/pages/health/medication'
            })
        },
        goHealthIndicators() {
            uni.navigateTo({
                url: '/pages/health/indicators'
            })
        },
        goMyQuestions() {
            uni.navigateTo({
                url: '/pages/health/my-questions'
            })
        },
        goMyCollections() {
            uni.navigateTo({
                url: '/pages/health/my-collections'
            })
        },
        goMyConsultations() {
            uni.navigateTo({
                url: '/pages/health/my-consultations'
            })
        },
        goReminders() {
            uni.navigateTo({
                url: '/pages/health/reminders'
            })
        },
        goHealthCalculator() {
            uni.navigateTo({
                url: '/pages/health/calculator'
            })
        },
        goHospitalMap() {
            uni.navigateTo({
                url: '/pages/health/hospital-map'
            })
        },
        logout() {
            uni.showModal({
                title: '提示',
                content: '确定要退出登录吗？',
                success: (res) => {
                    if (res.confirm) {
                        // 退出登录操作
                        uni.showToast({
                            title: '已退出登录',
                            icon: 'success'
                        })
                        
                        setTimeout(() => {
                            uni.reLaunch({
                                url: '/pages/login/index'
                            })
                        }, 1500)
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    padding-bottom: 40rpx;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .user-info {
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 30rpx;
        
        .avatar-box {
            position: relative;
            margin-right: 30rpx;
            
            .avatar {
                width: 120rpx;
                height: 120rpx;
                border-radius: 60rpx;
            }
            
            .edit {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 40rpx;
                height: 40rpx;
                background-color: #1890FF;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        
        .info {
            flex: 1;
            
            .name {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 10rpx;
            }
            
            .desc {
                font-size: 24rpx;
                color: #999;
            }
        }
    }
    
    .health-stats {
        display: flex;
        background-color: #fff;
        padding: 30rpx 0;
        margin-bottom: 20rpx;
        
        .stat-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            
            .value {
                font-size: 36rpx;
                font-weight: bold;
                color: #1890FF;
                margin-bottom: 10rpx;
            }
            
            .label {
                font-size: 24rpx;
                color: #666;
            }
        }
    }
    
    .menu-section {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .section-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
        }
        
        .menu-list {
            .menu-item {
                display: flex;
                align-items: center;
                padding: 20rpx 0;
                border-bottom: 2rpx solid #F7F7FA;
                
                &:last-child {
                    border-bottom: none;
                }
                
                .icon {
                    width: 60rpx;
                    height: 60rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 20rpx;
                }
                
                .label {
                    flex: 1;
                    font-size: 28rpx;
                    color: #333;
                }
            }
        }
    }
    
    .logout {
        background-color: #fff;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        font-size: 32rpx;
        color: #FF4D4F;
        margin-top: 40rpx;
    }
}
</style> 